<script setup>
import { reactive, ref } from 'vue';
import * as api from '@/api/public';
import moment from 'moment';

const depts = reactive([])

let search = ref('')

let selected = ref('')

let createTimeStart = ref('')
let createTimeEnd = ref('')

const init = () => {
    api.getData({
        page: 1,
        size : 10
    }, '/dept').then( res => {
        depts.push(...res.data)
    })
}

init()

const emits = defineEmits(['query'])

const query = () => {
    console.log(createTimeStart.value)
    emits('query', { 
        roleName: search.value,
        begin: createTimeStart.value ? moment(createTimeStart.value).format('yyyy-MM-DD HH:mm:ss') : '',
        end: createTimeEnd.value ? moment(createTimeEnd.value).format('yyyy-MM-DD HH:mm:ss') : ''
     })
}

</script>
<template>
    <div class="compnent-box">
        <div class="left">
            <div class="item">
                <span>创建时间：</span>
                <el-date-picker
                    v-model="createTimeStart"
                    type="datetime"
                    placeholder="开始"
                /> -
                <el-date-picker
                    v-model="createTimeEnd"
                    type="datetime"
                    placeholder="结尾"
                />
            </div>
            <div class="item">
                <el-input v-model="search"
                    placeholder="请输入内容"
                    clearable
                >
                    <template #prefix>
                        <el-icon><Search /></el-icon>
                    </template>
                </el-input>
            </div>
        </div>
        <div class="right">
            <el-button type="primary" @click="query">搜索</el-button>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.compnent-box{
    display: flex;
    margin-bottom: 12px;
    padding: 10px;
    padding-bottom: 0;
    box-sizing: border-box;
    border: 1px solid #c5c5c5;
    .left{
        display: flex;
        flex: 1;
        flex-wrap: wrap;
        justify-content: flex-start;
        .item{
            margin-right: 10px;
            margin-bottom: 10px;
        }
    }
    .right{
        display: flex;
        flex: 0.2;
        justify-content: flex-end;
        align-items: flex-end;
        margin-bottom: 10px;
    }
}
</style>